<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <title>物料配套申请</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta content="no-cache, no-store, must-revalidate" http-equiv="Cache-Control"/>
    <meta content="no-cache" http-equiv="Pragma"/>
    <meta content="0" http-equiv="Expires"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=8">
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="Cache" content="no-cache">
    <link rel="stylesheet" href="../styles/base.css"/>
    <!--<link rel="stylesheet" href="../styles/common.css"/>-->
    <link rel="stylesheet" href="../styles/font/iconfont.css"/>
    <link rel="stylesheet" href="../js/layui/css/layui.css"  media="all">
    <style>
        body{
            background:#ddecf5;
            overflow: hidden;
        }
        .tipHeader{
            width:100%;
            height:40px;
        }
        body{
        }
        input{
            text-align: center;
        }
        .tipHeader li{
            float:left;
            width:100px;
            height:30px;
            line-height: 30px;
            text-align: center;
            cursor: pointer;
        }
        .tipHeader li:hover{
            color:#40E0D0;
        }
        .tipHeader li i{
            width:100%;
            text-align: center;
            line-height: 30px;
            font-size: 18px;
        }
        .tipHeader li div{
            font-size: 16px;
        }
        .textTable{
            clear: both;
            margin-top: 20px;
            min-width: 100%;
            width:100%;
            height:auto;
            padding-bottom: 10px;
            overflow-x: scroll;
            position: relative;

        }
        .tabLeft{
            position:fixed;
            background:#eee;
            left:3%;
            z-index: 999;
        }
        .tabLeft tr, .tabRight tr{
            height:40px;
        }
        .tabLeft tr td,.tabLeft tr th{
            padding:0 5px;
        }
        .tabLeft tr td,.tabLeft tr th{
            min-width:50px;
            width: auto;
            text-align: center;
          /* // height:30px;*/
        }
        .tabLeft tr td input,.tabLeft tr th input{
            width:15px;
            height:15px;
        }
        .textTable td{
            width:50px;
            text-align: center;
            height:30px;
        }
        .tabRight tbody tr td{
            max-height:40px;
            padding:0 5px;
            max-width:280px;
            text-align: center;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
        }
        .tabRight{
            margin-left: 112px;
        }
        .tabRight thead{
            background:#eee;
        }
        .textTable .tabRight tr{
            width:auto;
        }
        .textTable .tabRight td {
            width:auto;
            min-width: 120px;
            text-align: center;
            height:30px;
        }
        .textTable .tabRight tr td:first-child{
            max-width: 150px;
            min-width: 150px;
        }
        .textTable .tabRight tr td input{
            width:90%;
            margin-left:5%;
            height:39px;
            line-height: 39px;
            font-size: 14px;
        }
        .boxContainer{
            background: #fff;
            width:94%;
            margin-left:2%;
           padding:10px 1%;
            margin-top: 10px;
            clear: both;
        }
        .layui-form{
            heigth:31px;
            width:auto;
            overflow: hidden;
        }
        .layui-form-item{
            margin-bottom: 0;

        }
        .layui-input-block{
            margin-left: 0px;
           /* min-height: 30px*/

        }
        .layui-form [lay-ignore] {
            display: initial;
            border:none;
            min-width: 100%;
            width:auto;
            height:36px;
            line-height: 36px;
            padding: 0 2%;
            margin: 0;
        }

        .laytable-cell-1-sexc{overflow:visible;}
        .textTable .tabRight tr td .layui-input-block input{
            width:100%;
            margin-left: 0;
            border:none;
        }
        #loading{
            position:fixed;
            width:100%;
            height:100%;
            bacckground:rgba(0,0,0,0.2);
            z-index: 99999999999999999999999;
            display:none;
        }
        #loading img{
            width:100px;
            height:100px;
        }
        .submitBtns div{
            display: inline-block;
            ont: 14px "微软雅黑";
            float:right;
            background-color: #eee;
            font-family: 'Open Sans', sans-serif;
            font-size: 14px;
            text-decoration: none;
            font-weight: 600;
            color: #333;
            position: relative;
            padding: 2px 15px;
            margin-right: 15px;
            margin-top: 10px;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
            background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(242,242,242)), color-stop(1, rgb(242,242,242)) );
            cursor: pointer;
        }
        .submitBtns div:hover{
            color:#fff;
            background:#40E0D0;
        }
        .layui-layer-content .layui-form{
            border:1px solid #ccc;
        }
        .tabLeft tbody tr td:first-child{
            background:#fff;
        }
        .publicAttributes{
            background:#eee;
            opacity:0.6;filter:Alpha(opacity=60)
        }
</style>
</head>
<body>
<div class="boxContainer">
    <div id="loading">
        <img src='../styles/img/loading.gif' />
    </div>
    <div>
        <ul class="tipHeader">
            <li class="addColumn"><i class="iconfont" title="添加一行">&#xe601;</i><div>添加一行</div></li>
           <!-- <li class="allApplication"><i class="iconfont" title="全部应用">&#xe63c;</i><div>全部应用</div></li>-->
            <li class="deleteColumn"><i class="iconfont" title="移除选定行">&#xe6ee;</i><div>移除选定行</div></li>
            <li class="editCurrencyApplicat"><i class="iconfont" title="编辑通用属性">&#xe817;</i><div>编辑通用属性</div></li>
        </ul>
    </div>
    <div class="textTable">
       <table class="tabLeft"  cellspacing="0" cellpadding="0" style="border-width:1px;border-style:solid;border-color:#ccc"  border="1">
            <thead><tr><th><input type="checkbox"/></th><th>编号</th></tr></thead>
        </table>
        <table class="tabRight" cellspacing="0" cellpadding="0" style="border-width:1px;border-style:solid;border-color:#ccc"  border="1">

        </table>
        
    </div>
    <div class="submitBtns">
        <div class="submitMes">提交</div><!--<div class="tempStorage">暂存</div>-->
    </div>
    <div style="clear:both;"></div>
    </div>
</body>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="../js/common/common.js"></script>
<script type="text/javascript" src="../js/common/utils.js"></script>
<script type="text/javascript" src="../js/layui/layui.js"></script>
<script type="text/javascript" src="../js/common/myAjax.js"></script>
<script src="../js/pages/mateApply/typeC.js"></script>
<script src="../js/pages/mateApply/typePOL.js"></script>
<script src="../js/pages/mateApply/editData.js"></script>
<script>
    (function(){
        var height=document.body.clientHeight;
        var width =document.body.clientWidth;
        $("#loading img").css({
            "margin-left":width/2-25+"px",
            "margin-top":height/2-25+"px"
        })
        $("#loading").css({
            display:"none"
        });
        var classtype=getQueryStringByNameTwo("checkVal");
        var oid=getQueryStringByNameTwo("oid")!=undefined?getQueryStringByNameTwo("oid"):"";
        var orEdt=getQueryStringByNameTwo("edit")!=undefined?getQueryStringByNameTwo("edit"):"";
        var itemOid=getQueryStringByNameTwo("itemOid")!=undefined?getQueryStringByNameTwo("itemOid"):"";
        if(oid!=""&&orEdt!=""&&itemOid!=""){
            $(".addColumn").css({
                'display':"none"
            })
            $(".deleteColumn").css({
                'display':"none"
            })
            editDataFn();
        }else{

            if(classtype=="POL"){
                typePOLFn();
                $(".deleteColumn").click(function(){
                    layerFn("原材料不能删除")
                })
            }else{
                getTypeCFn();

                //删除指定行
                $(".deleteColumn").click(function(){
                    if($(".tabLeft tbody .checked").length>0){
                        for(var i=0;i<$(".tabLeft tbody .checked").length;i++){
                            if($(".tabLeft tbody .checked").eq(i).find("td").eq(1).text()=="虚拟偏光片组件"){
                                $(".tabRight").css({
                                    "margin-left":"120px"
                                })
                            }
                        }
                        $(".tabLeft thead input").removeProp("checked");//
                        $(".tabLeft tbody .checked").remove();
                        $(".tabRight tbody .checked").remove();
                        var height=$(".tabRight thead").height();
                        $(".tabLeft thead tr").css("height",height+"px");

                    }else{
                        layerFn("请选择删除行！")
                    }
                })
            }
        }

        //编辑通用属性
        $(".editCurrencyApplicat").click(function(){
            var locationHref=location.search;
            window.open("supApplicat.html"+locationHref);
            var localData="";
            if(classtype=="POL"){
                var text="";
                for(var f=0;f< ($(".tabRight tbody tr").eq(0).find(".publicAttributes").length);f++){
                    if(f<($(".tabRight tbody tr").eq(0).find(".publicAttributes").length-1)){
                        text+=$(".tabRight tbody tr").eq(0).find(".publicAttributes").eq(f).text()+"&;";
                    }else{
                        text+=$(".tabRight tbody tr").eq(0).find(".publicAttributes").eq(f).text();
                    }
                }
                localStorage.setItem("commonClassTypePOL",text)
                localData=localStorage.getItem("commonClassTypePOL")?localStorage.getItem("commonClassTypePOL"):"";
            }else {
                //localData=localStorage.getItem("commonClassTypeC")?localStorage.getItem("commonClassTypeC"):"";
                var text=[];
                for(var f=0;f< ($(".tabRight tbody tr").eq(0).find(".publicAttributes").length);f++){
                   /* if(f<($(".tabRight tbody tr").eq(0).find(".publicAttributes").length-1)){
                        text.push($(".tabRight tbody tr").eq(0).find(".publicAttributes").eq(f).text()+$(".tabRight tbody tr").eq(0).find(".publicAttributes").eq(f).text());
                    }else{
                        text+=$(".tabRight tbody tr").eq(0).find(".publicAttributes").eq(f).text();
                    }*/
                    text.push($(".tabRight tbody tr").eq(0).find(".publicAttributes").eq(f).text()+"$#"+$(".tabRight tbody tr").eq(0).find(".publicAttributes").eq(f).text());
                }
                localStorage.setItem("commonClassTypeC",text);
                localData=localStorage.getItem("commonClassTypeC")?localStorage.getItem("commonClassTypeC"):"";
            }
            var timers=setInterval(function(){
                var changeLocalData="";
                //var number="";
                if(classtype=="POL"){
                    changeLocalData=localStorage.getItem("commonClassTypePOL")?localStorage.getItem("commonClassTypePOL"):"";
                   // number=20;
                }else {
                    changeLocalData=localStorage.getItem("commonClassTypeC")?localStorage.getItem("commonClassTypeC"):"";

                }
                if(localData!=changeLocalData){
                    if(classtype=="POL"){
                        changeLocalData=changeLocalData.split("&;");
                        for(var i=0;i<$(".tabRight tbody tr").length;i++){
                            var  otd=$(".tabRight tbody tr").eq(i).find(".publicAttributes");
                            for(var k=0;k<otd.length;k++){
                                $(".tabRight tbody tr").eq(i).find(".publicAttributes").eq(k).text(changeLocalData[k])
                            }
                        }
                    }else{
                        changeLocalData=changeLocalData.split(",");
                        for(var i=0;i<$(".tabRight tbody tr").length;i++){
                            var  otd=$(".tabRight tbody tr").eq(i).find(".publicAttributes");
                            for(var k=0;k<otd.length;k++){
                                var textArr=changeLocalData[k].split("$#");
                                $(".tabRight tbody tr").eq(i).find(".publicAttributes").eq(k).attr("data-submitData",textArr[1]).attr("title",textArr[0])
                                $(".tabRight tbody tr").eq(i).find(".publicAttributes").eq(k).text(textArr[0])
                            }
                        }
                    }
                    clearInterval(timers);

                }
            },500)
        })
        //多选
        $("body").on("click",".tabLeft thead input",function(){
            var checked=$(".tabLeft thead input").prop('checked');
            if(checked){
                $(".tabLeft tbody input").prop("checked","checked");
                for(var i=0;i<$(".tabLeft tbody input").length;i++){
                    $(".tabLeft tbody tr").eq(i).addClass("checked");
                    $(".tabRight tbody tr").eq(i).addClass("checked");

                }
            }else{
                for(var i=0;i<$(".tabLeft tbody input").length;i++){
                    $(".tabLeft tbody tr").eq(i).removeClass("checked");
                    $(".tabRight tbody tr").eq(i).removeClass("checked");
                }
                $(".tabLeft tbody input").removeProp("checked");

            }
        })
        $("body").on("click",".tabLeft tbody input",function(){
            var checked=$(this).prop('checked');
            if(checked){
               $(this).parents("tr").addClass("checked")
            }else{
                $(this).parents("tr").removeClass("checked");
                $(".tabLeft thead input").removeProp("checked","checked")
            }
            var flage=0;
            for(var i=0;i<$(".tabLeft tbody input").length;i++){
                if($(".tabLeft tbody input").eq(i).prop('checked')){
                    $(".tabRight tbody tr").eq(i).addClass("checked");
                    //flage=true;
                }else{
                    $(".tabRight tbody tr").eq(i).removeClass("checked");
                    flage+=1;
                }
            }
            if(flage==0){
                $(".tabLeft thead input").prop("checked","checked")
            }
        });

        $(".tabRight thead tr td").click(function(){
            $(".tabRight thead tr td").removeClass("Identification");
            $(this).addClass("Identification");
        });
        window.onload=function(){
            //全部应用
          /*  $(document).on("click",".allApplication",function(){
                var headerIdentificat=$(".tabRight thead tr .Identification");
                var chackbox=$(".tabLeft tbody .checked");
                var index=0;
                var leftIndex=0;
                for(var i=0;i<$(".tabRight thead tr td").length;i++){
                    var className=$(".tabRight thead tr td").eq(i).attr("class");
                    if(className=="Identification"){
                        index=i+1;
                    }
                }
                if(headerIdentificat.length==1&&chackbox.length==1){
                    for(var n=0;n<$(".tabLeft tbody tr").length;n++){
                        var className=$(".tabLeft tbody tr").eq(n).attr("class");
                        if(className=="checked"){
                            leftIndex=n+1;
                        }
                    }
                    var text=$(".tabRight tbody tr:nth-child("+leftIndex+") td:nth-child("+index+") input");
                    var vals=$(".tabRight tbody tr:nth-child("+leftIndex+") td:nth-child("+index+") input").val();
                    for(var m=0;m<($(".tabRight tbody tr").length+1);m++){
                        $(".tabRight tbody tr:nth-child("+m+") td:nth-child("+index+") input").val(vals)
                    }
                }
            })*/
        }
        //增加一行
        $(".addColumn").click(function(){
            var len=$(".tabLeft tbody tr").length;
            var typeLen=commonObj.supportApplicat;
            for(var i=0;i<typeLen.length;i++){
                if(classtype==typeLen[i].value){
                    var typenLen=typeLen[i].datalist.length;
                        var textArr=typeLen[i].datalist
                        for(var m=0;m<len;m++){
                            var text=$(".tabLeft tbody tr").eq(m).find("td:nth-child(2)").text();
                            var index = getIndexof(textArr,text);
                            if(index>(-1)){
                                textArr.splice(index, 1)
                            }
                        }
                        //创建元素
                        if(textArr.length>0){
                            var arrAdd="";
                            var listText="";
                            function renderForm2(str,m,formCallback,filter){
                                layui.use('form', function(){
                                    var form = layui.form;//高版本建议把括号去掉，有的低版本，需要加()
                                    var option="";
                                    for(var i=0;i<str.length;i++){
                                        option+='<option value="">'+str[i]+'</option>'
                                    }
                                    listText+='<form class="layui-form" action=""> <div class="layui-form-item proSelect"> <div class="layui-input-block editWidth"> <select lay-ignore style="display:block;" class="selectItem" name="" lay-verify=""> <option value="">--请选择--</option>'+option+' </select> </div> </div></form>';

                                    form.render("select");
                                });
                            }
                            renderForm2(textArr,"Item");
                            layerFn(listText,function(){
                                arrAdd=$(".layui-layer .layui-form select option:selected").text();
                                if(classtype=="C"&&arrAdd!='--请选择--'){
                                    getTypeCFn("flage",classtype,arrAdd);
                                }else if(classtype=="POL"&&arrAdd!='--请选择--'){

                                    typePOLFn("flage",classtype,arrAdd);
                                }else if(classtype=="L"&&arrAdd!='--请选择--'){
                                    getTypeCFn("flage",classtype,arrAdd);
                                }else if(classtype=="E"&&arrAdd!='--请选择--'){
                                    getTypeCFn("flage",classtype,arrAdd);
                                }
                            })
                          /*  for(var n=0;n<textArr.length;n++){

                                /!*if(n==(textArr.length-1)){
                                    arrAdd+=textArr[n]
                                }else{
                                    arrAdd+=textArr[n]+","
                                }*!/
                           // }

                        }*/
                    }else{
                            layerFn("此类型已经全部添加不可重复添加")
                        }

                }

            }


        })

    })()


</script>
</html>